<template>
  <div id="content_warpper" class="content_warpper">
    <a-card id="anchor-setting" :bordered="false" title="基本设置">
      <a-form :label-col="{ span: 4 }" :wrapper-col="{ span: 16 }">
        <a-form-item label="问卷标题">
          <a-input
            v-model:value="modalRef.title"
            :style="inputStyle"
            :disabled="!edit"
          />
        </a-form-item>

        <a-form-item label="问卷说明">
          <a-input
            v-model:value="modalRef.tips"
            :style="inputStyle"
            :disabled="!edit"
          />
        </a-form-item>

        <a-form-item label="开始时间">
          <a-date-picker
            v-model:value="modalRef.startTime"
            show-time
            placeholder="请选择开始时间"
            :valueFormat="format"
            :disabled="!edit"
          />
        </a-form-item>

        <a-form-item label="结束时间">
          <a-date-picker
            v-model:value="modalRef.endTime"
            show-time
            placeholder="请选择结束时间"
            :valueFormat="format"
            :disabled="!edit"
          />
        </a-form-item>

        <a-form-item label="提交后显示">
          <a-input
            v-model:value="modalRef.submit"
            :style="inputStyle"
            :disabled="!edit"
          />
        </a-form-item>

        <a-form-item>
          <div class="button_warpper">
            <template v-if="edit">
              <a-button type="primary" @click="handleSave">保存</a-button>

              <a-button @click="handleCancel">取消</a-button>
            </template>

            <template v-else>
              <a-button type="primary" @click="handleEdit">编辑</a-button>
            </template>
          </div>
        </a-form-item>
      </a-form>
    </a-card>
  </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref, watchEffect } from 'vue';
export default defineComponent({
  components: {},
  props: {
    edit: { type: Boolean, default: false },
    modal: { type: Object, default: new Object() },
  },
  emits: [
    'handleEdit',
    'handleSave',
    'handleCancel',
    'handleStartTime',
    'handleEndTime',
  ],
  setup(props, { emit }) {
    const inputStyle = reactive({
      width: '204px',
    });

    const modalRef = reactive({
      title: '',
      tips: '',
      startTime: '',
      endTime: '',
      submit: '',
    });

    watchEffect(() => {
      modalRef.title = props.modal.title;
      modalRef.tips = props.modal.tips;
      modalRef.startTime = props.modal.startTime;
      modalRef.endTime = props.modal.endTime;
      modalRef.submit = props.modal.submit;
    });

    const handleSave = () => {
      emit('handleSave', modalRef);
    };

    const handleCancel = () => {
      emit('handleCancel');
    };

    const handleEdit = () => {
      emit('handleEdit');
    };

    const handleStartTime = (value: string) => {
      emit('handleStartTime', value);
    };

    const handleEndTime = (value: string) => {
      emit('handleEndTime', value);
    };
    return {
      inputStyle,
      modalRef,
      handleSave,
      handleCancel,
      handleEdit,
      format: ref('YYYY-MM-DD HH:mm:ss'),
      handleStartTime,
      handleEndTime,
    };
  },
});
</script>
<style lang="less" scoped>
.content_warpper {
  padding: 12px;
  width: 670px;
  background-color: white;
  border-radius: 8px;
  // height: 300px;
  margin: 0 12px;
}
.button_warpper {
  display: flex;
  align-items: center;
  justify-content: center;
  // width: 275px;
  button {
    margin: 0 12px 0 0;
  }
}
</style>
